<template>
  <div class="view-rush">
    <div v-for="(ite, n) in list" :key="ite.id" class="ques-item">
      <div class="ques-item-info">
        <h3 class="ques-item-title">{{ n + 1 }}. {{ ite.question || '' }}</h3>
        <ul class="ques-item-answer">
          <div v-if="ite.type == 1">
            <li v-for="(ans, i) in jsonParse(ite.answer).opt" :key="ans" :class="{'active': ans == getAnswers(ite.answer)}">{{ answerMap[i] }}、{{ ans }}</li>
          </div>
          <div v-if="ite.type == 2">
            <li v-for="(ans, i) in jsonParse(ite.answer).opt" :key="ans" :class="{'active': isSelectActive(ite.answer, ans)}">{{ answerMap[i] }}、{{ ans }}</li>
          </div>
          <div v-if="ite.type == 3">
            <li v-for="ans in yesOrNo.opt" :key="ans" :class="{'active': ans == getAnswers(ite.answer)}">{{ ans }}</li>
          </div>
          <div v-if="ite.type == 4">
            <li><el-input :disabled="true" :value="getAnswers(ite.answer)" placeholder=""/></li>
          </div>
          <div v-if="ite.type == 5">
            <li><el-input :disabled="true" :value="getAnswers(ite.answer)" :rows="2" type="textarea" placeholder=""/></li>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ViewRush',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      answerMap: {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D',
        4: 'E',
        5: 'F',
        6: 'G',
        7: 'H'
      },
      yesOrNo: { 'opt': ['对', '错'], 'answer': [] }
    }
  },
  methods: {
    isSelectActive(answer, ans) {
      var answrArr = JSON.parse(answer).answer
      for (var i = 0, l = answrArr.length; i < l; i++) {
        if (ans === answrArr[i]) {
          return true
        }
      }
      return false
    },
    jsonParse(str) {
      return window.JSON.parse(str)
    },
    getAnswers(str) {
      var t = window.JSON.parse(str)
      var answer = t.answer
      this.answerType = t.type
      if (t.type === 1) {
        return answer[0]
      } else if (t.type === 2) {
        return answer
      } else {
        return answer[0]
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$mainColor: #18A5FD;
.view-rush{
  max-height: 600px;
  overflow: auto;
  .ques-item{
    margin-bottom: 10px;
    display: flex;
    .ques-item-info{
      padding: 10px 20px;
      background-color: #F7F7F8;
      position: relative;
      flex: 1;
    }
    .ques-item-btn{
      position: relative;
      width: 40px;
      i{
        position: absolute;
        top: 50%;
        margin-top: -8px;
        left: 50%;
        margin-left: -8px;
        cursor: pointer;
      }
    }
    .ques-item-title{
      width: 80%;
      font-size:14px;
      font-family:PingFangSC-Medium;
      font-weight:bold;
      color:rgba(51,51,51,1);
      margin: 0;
    }
    .ques-item-answer{
      margin: 0;
      padding: 0;
      margin-top: 5px;
      margin-left: 15px;
      width: 80%;
      li{
        list-style: none;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height: 30px;
        &.active{
          color: $mainColor;
        }
      }
    }
    .ques-item-score{
      width: 120px;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -14px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      .el-input{
        margin: 0 5px;
      }
    }
  }
}
</style>
